<script setup lang="ts">
import { ref } from 'vue';

const active = ref(0);
</script>

<template>
    <div class="goldcoin">
        <header class="header">
            <div class="back" @click="$router.back()" style="margin-left:15px; margin-top: 30px;">
                <svg t="1731383206890" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2340" width="18" height="18">
                    <path
                        d="M733.090909 977.454545a23.202909 23.202909 0 0 1-16.453818-6.818909l-442.181818-442.158545a23.202909 23.202909 0 0 1 0-32.907636l442.181818-442.205091a23.249455 23.249455 0 1 1 32.907636 32.907636L323.816727 512.023273l425.728 425.704727A23.249455 23.249455 0 0 1 733.090909 977.454545z"
                        fill="" p-id="2341"></path>
                </svg>
                <span style="font-size: 18px; color: #000; margin-left: 120px;">我的金币</span>
            </div>

            <div class="goldcoin-num">
                <div class="left">
                    <p style="color: #fff; font-size: 14px;">可用金币（个）</p>
                    <p style="color: #fff; font-size: 28px;position: relative;bottom: 20px;">30,000</p>
                </div>
                <div class="right">
                    <span><van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84%E9%87%91%E5%B8%81_%E6%94%B6%E5%85%A5/u3064.svg"></van-image></span>
                    <span style="color: #fff;  margin-right: 10px;margin-left: 8px;">规则说明</span>


                </div>
            </div>
        </header>
        <main class="main">
            <div class="rule">
                <van-tabs v-model:active="active">
                    <van-tab title="金币收入">
                        <div class="income" v-for="item in 3 " :key="item">
                            <div class=" left">
                                <p style="color: #333; font-size: 15px;">发布图文</p>
                                <p style="color: #999; font-size: 12px; margin-top: 5px;">2098-11-24 18:51</p>
                            </div>

                            <div class="right">
                                <span style="color: #ff9900;font-size: 16px;">+100</span>
                            </div>
                        </div>

                    </van-tab>
                    <van-tab title="金币支出">
                        <div class="income" v-for="item in 3 " :key="item">
                            <div class=" left">
                                <p style="color: #333; font-size: 15px;">支付抵扣金币-门票</p>
                                <p style="color: #999; font-size: 12px; margin-top: 5px;">2098-11-24 18:51</p>
                            </div>

                            <div class="right">
                                <span style="color: #f66;font-size: 16px;">-89400</span>
                            </div>

                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </main>
    </div>
</template>




<style scoped lang="scss">
.goldcoin {
    .goldcoin-num {
        width: 345px;
        height: 90px;
        background: linear-gradient(180deg, rgba(255, 190, 99, 1) 0%, rgba(255, 142, 63, 1) 100%);
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        margin: 20px auto;

        .left {
            margin-left: 15px;
        }

        .right {
            position: relative;
            top: 55px;
        }
    }

    .main {
        width: 100%;

        .rule {
            width: 95%;
            margin: 0 auto;

            .income {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px;
                background-color: white;
                border-radius: 10px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
                margin-top: 10px;
            }
        }
    }
}
</style>